import React, { useRef, useState } from 'react'
import { connect } from 'react-redux'
import { Button, Input, InputNumber, Space } from 'antd'
import { addPersonAction } from '../../redux/actions/person'

function Person(props) {
  // const nameRef = useRef()
  // const ageRef = useRef()
  const [name, setName] = useState('')
  const [age, setAge] = useState('')

  function handleNameChange(e) {
    setName(e.target.value)
  }

  function handleAgeChange(val) {
    setAge(val)
  }

  function handleAdd() {
    // const name = nameRef.current.value
    // const age = +ageRef.current.value
    const obj = { name, age }
    props.addPersonAction(obj)
    // nameRef.current.value = ''
    // ageRef.current.value = ''
    setName('')
    setAge('')
  }

  return (
    <div>
      <h1>这是Person组件</h1>
      <h2>Count组件求和为：{props.count}</h2>
      {/*<input ref={nameRef} type="text" placeholder="请输入姓名" />
      &nbsp;&nbsp;
      <input ref={ageRef} type="text" placeholder="请输入年龄" />
      &nbsp;&nbsp;*/}
      <Space>
        <Input
          value={name}
          style={{ width: 220 }}
          placeholder="请输入姓名"
          onChange={handleNameChange}
        ></Input>
        <InputNumber
          value={age}
          style={{ width: 220 }}
          placeholder="请输入年龄"
          controls={false}
          onChange={handleAgeChange}
        ></InputNumber>
        <Button type="primary" onClick={handleAdd}>
          添加
        </Button>
      </Space>
      <br />
      <br />
      <ul style={{ fontSize: 16, listStyle: 'none' }}>
        {props.person.map((item, index) => (
          <li key={index}>
            姓名：{item.name}，年龄：{item.age}
          </li>
        ))}
      </ul>
    </div>
  )
}

export default connect(
  (state) => ({
    person: state.person,
    count: state.count,
  }),
  { addPersonAction }
)(Person)
